@charset "UTF-8";
//-----------------------------------------------------	
// bounce scss
//-----------------------------------------------------


// bounceIn
@mixin animate-bounceIn () {
  @include keyframes(bounceIn){
    0% {
      opacity: 0;
      @include scale(.3);
    }
    50% {
      opacity: 1;
      @include scale(1.05);
    }
    70% {
      @include scale(.9);
    }
    100% {
      @include scale(1);
    }
  }
  .bounceIn {
    @include animation-name(bounceIn);
    @extend %animated;
  }
}

// bounceInDown
@mixin animate-bounceInDown () {
  @include keyframes(bounceInDown){
    0% {
      opacity: 0;
      @include translateY(-2000px);
    }
    60% {
      opacity: 1;
      @include translateY(30px);
    }
    80% {
      @include translateY(-10px);
    }
    100% {
      @include translateY(0);
    }
  }
  .bounceInDown {
    @include animation-name(bounceInDown);
    @extend %animated;
  }
}

// bounceInLeft
@mixin animate-bounceInLeft () {
  @include keyframes(bounceInLeft){
    0% {
      opacity: 0;
      @include translateX(-2000px);
    }
    60% {
      opacity: 1;
      @include translateX(30px);
    }
    80% {
      @include translateX(-10px);
    }
    100% {
      @include translateY(0);
    }
  }
  .bounceInLeft {
    @include animation-name(bounceInLeft);
    @extend %animated;
  }
}

// bounceInRight
@mixin animate-bounceInRight () {
  @include keyframes(bounceInRight){
    0% {
      opacity: 0;
      @include translateX(2000px);
    }
    60% {
      opacity: 1;
      @include translateX(-30px);
    }
    80% {
      @include translateX(10px);
    }
    100% {
      @include translateY(0);
    }
  }
  .bounceInRight {
    @include animation-name(bounceInRight);
    @extend %animated;
  }
}

// bounceInUp
@mixin animate-bounceInUp () {
  @include keyframes(bounceInUp){
    0% {
      opacity: 0;
      @include translateY(2000px);
    }
    60% {
      opacity: 1;
      @include translateY(-30px);
    }
    80% {
      @include translateY(10px);
    }
    100% {
      @include translateY(0);
    }
  }
  .bounceInUp {
    @include animation-name(bounceInUp);
    @extend %animated;
  }
}

// bounceOut
@mixin animate-bounceOut () {
  @include keyframes(bounceOut){
    0% {
      @include scale(1);
    }
    25% {
      @include scale(。95);
    }
    75% {
      opacity: 1;
      @include scale(1.1);
    }
    100% {
      opacity: 0;
      @include scale(.3);
    }
  }
  .bounceOut {
    @include animation-name(bounceOut);
    @extend %animated;
  }
}

// bounceOutDown
@mixin animate-bounceOutDown () {
  @include keyframes(bounceOutDown){
    0% {
      @include translateY(0);
    }
    20% {
      opacity: 1;
      @include translateY(-20px);
    }
    100% {
      opacity: 0;
      @include translateY(2000px);
    }
  }
  .bounceOutDown {
    @include animation-name(bounceOutDown);
    @extend %animated;
  }
}

// bounceOutLeft
@mixin animate-bounceOutLeft () {
  @include keyframes(bounceOutLeft){
    0% {
      @include translateX(0);
    }
    20% {
      opacity: 1;
      @include translateX(20px);
    }
    100% {
      opacity: 0;
      @include translateX(-2000px);
    }
  }
  .bounceOutLeft {
    @include animation-name(bounceOutLeft);
    @extend %animated;
  }
}

// bounceOutRight
@mixin animate-bounceOutRight () {
  @include keyframes(bounceOutRight){
    0% {
      @include translateX(0);
    }
    20% {
      opacity: 1;
      @include translateX(-20px);
    }
    100% {
      opacity: 0;
      @include translateX(2000px);
    }
  }
  .bounceOutRight {
    @include animation-name(bounceOutRight);
    @extend %animated;
  }
}

// bounceOutUp
@mixin animate-bounceOutUp () {
  @include keyframes(bounceOutUp){
    0% {
      @include translateY(0);
    }
    20% {
      opacity: 1;
      @include translateY(20px);
    }
    100% {
      opacity: 0;
      @include translateY(-2000px);
    }
  }
  .bounceOutUp {
    @include animation-name(bounceOutUp);
    @extend %animated;
  }
}